<template>
    <div class="cart-sku"  ref="target">
        <div class="attrs" @click="toggle">
            <span class="ellipsis">{{ attrsText }}</span>
            <i class="iconfont icon-angle-down"></i>
        </div>
        <div class="layer" v-if="visiable">
            <div class="loading" v-if="!goods"></div>
            <GoodsSku @changeSku="changeSku" v-if="goods" :skuId="skuId" :goods="goods" />
            <XtxButton v-if="goods" @click="submit" type="primary" size="mini" style="margin-left:60px">确认</XtxButton>
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { getSpecsAndSkus } from '@/api/cart'
import GoodsSku from '@/views/goods/components/goods-sku.vue'
export default {
    name: 'CartSku',
    components: {
        GoodsSku
    },
    props: {
        attrsText: {
            type: String,
            default: ''
        },
        skuId: {
            type: String,
            default: ""
        }
    },
    setup(props, { emit }) {
        const visiable = ref(false)
        const target = ref(null)
        const goods = ref(null)
        const close = () => {
            visiable.value = false
            goods.value = null
        }
        const open = () => {
            visiable.value = true
            getSpecsAndSkus(props.skuId).then(({ result }) => {
                goods.value = result
            }).catch(err => console.log('err :', err))
        }
        //切换
        const toggle = () => {
            visiable ? open() : close()
        }
        onClickOutside(target, () => {
            close()
        })

        //改变sku
        const currSku = ref(null)
        const changeSku = (sku) => {
            currSku.value = sku
        }

        const submit = () => {
            if (currSku.value && currSku.value.skuId && currSku.value.skuId !== props.skuId) {
                emit('change', currSku.value)
                close()
            }
        }

        return {
            visiable,
            target,
            toggle,
            goods,
            changeSku,
            submit
        }
    }
}
</script>
<style scoped lang="less">
.cart-sku {
    height: 28px;
    border: 1px solid #f5f5f5;
    padding: 0 6px;
    position: relative;
    margin-top: 10px;
    display: inline-block;

    .attrs {
        line-height: 24px;
        display: flex;

        span {
            max-width: 230px;
            font-size: 14px;
            color: #999;
        }

        i {
            margin-left: 5px;
            font-size: 14px;
        }
    }

    .layer {
        position: absolute;
        left: -1px;
        top: 40px;
        z-index: 10;
        width: 400px;
        border: 1px solid @xtxColor;
        box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
        background: #fff;
        border-radius: 4px;
        font-size: 14px;
        padding: 20px;

        &::before {
            content: "";
            width: 12px;
            height: 12px;
            border-left: 1px solid @xtxColor;
            border-top: 1px solid @xtxColor;
            position: absolute;
            left: 12px;
            top: -8px;
            background: #fff;
            transform: scale(.8, 1) rotate(45deg);
        }

        .loading {
            height: 224px;
            background: url(../../../assets/images/loding.svg) no-repeat center;
            background-size: 50px 50px;
            animation: rot 1.2s infinite linear;
        }
    }
}
</style>